<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fake Progress Bar</title>
<script type="text/javascript" src="MrClay_Transition.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script type="text/javascript">
function start() {
	var
		seconds = 10,
		fps = 30,
		bar = document.getElementById('bar'),
		t = new MrClay.Transition(1000 * seconds, fps);
	bar.parentNode.style.display = 'block';
	t.trackElementStyle(0, 400, Easing.Expo.easeOut, bar, 'width');
	// optional
	t.setEndFunction(function(){
		document.body.appendChild(document.createTextNode('fin.'));
	});
	t.begin();
}
</script>
<style type='text/css'>
#progress {
	width:400px;
	height:50px;
	border:5px #CCCCCC solid;
	margin:20px auto;
	display:none;}
#bar {
	width:0px;
	height:50px;
	background:#0099FF;}
</style>
</head>
<body>
<h1>Fake Progress Bar</h1>
<p>Exponential easing out over 10 seconds.</p>
<p><a href="#" onclick="start();">Start</a></p>
<div id="progress">
	<div id="bar"></div>
</div>
</body>
</html>